<template>
	<view class="s-picker" v-if="show">
		<view class="mark" @touchmove.stop="" @click="show = false"></view>
		<view class="content">
			<view class="content-head"><view @click="show = false" class="content-head-touch"></view></view>

			<picker-view :immediate-change="true" v-if="show" :indicator-style="'height: 40px;'" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column :immediate-change="true">
					<view class="item" :style="{ color: index == value[0] ? '#0091ff' : '#333333' }" v-for="(item, index) in options" :key="index">{{ item }}</view>
				</picker-view-column>
			</picker-view>
			<view class="content-btn"><view class="btn" @click="success">确定</view></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 's-picker',
	data() {
		return {
			value: [0],
			keyval: '',
			show: false,
			options: ['待开始']
		};
	},
	methods: {
		bindChange(res) {
			// console.log(res)
			this.value = res.detail.value;
		},
		chooseItem(item) {
			item.checked = !item.checked; 
		},
		init(data) {
			this.options = JSON.parse(JSON.stringify(data.options || []));
			if (data.value || data.value === 0) {
				this.value = [Number(data.value)];
			}
			this.keyval = data.keyval;
			this.show = true;
		},
		success() {
			// let select = false;

			this.$emit('change', { keyval: this.keyval, value: this.value[0] });
			this.show = false;
		}
	}
};
</script>

<style scoped lang="scss">
.s-picker {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	.mark {
		position: fixed;
		z-index: 99;
		background: rgba(0, 0, 0, 0.17);
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}

	.content {
		z-index: 100;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 600rpx;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		overflow: hidden;
		width: 100%;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		background-color: #fff;
		animation: upm 0.3s;
		display: flex;
		flex-direction: column;
		&-head {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 36rpx;
			&-touch {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
			}
		}

		.picker-view {
			position: relative;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 238px;
			flex: 1;
			background-color: rgba(255, 255, 255, 1);
			.item {
				text-align: center;
				line-height: 40px;
				font-size: 16px;
			}
		}
		&-btn {
			width: 100%;
			.btn {
				width: 670rpx;
				height: 70rpx;
				background: #0091ff;
				border-radius: 8rpx;
				text-align: center;
				line-height: 69rpx;
				font-size: 28rpx;
				color: #fff;
				margin: 32rpx auto;
			}
		}
	}
}

@keyframes upm {
	0% {
		transform: translateY(870rpx);
	}

	100% {
		transform: translateY(0);
	}
}
</style>
